<script setup lang="ts">
import { router } from "@/router/router";
import { PeopleInfo } from "@/tool/glo";


import { onMounted, ref } from "vue";
const refresh = ref(true);
const logout = () => {
  // let company_id = GetCompanyId();
  // TokenExit();
  // SetCompanyId(company_id);
  // router.replace("/login");
};

onMounted(() => {
  // GetPeopleInfo(() => {
  //   refresh.value = true;
  // });
});

const lists = [
  // {
  //   img: "/person/feedback.png",
  //   lable: "我要反馈",
  //   router: "/myCount/feedback",
  // },
  // {
  //   img: "/person/help.png",
  //   lable: "帮助中心",
  //   router: "/myCount/help",
  // },
  {
    img: "/person/about.png",
    lable: "关于我们",
    router: "/aboutus",
  },
];
const showEditDialog = ref(false);
const formData = ref({
  name: PeopleInfo.value.name,
  phone: PeopleInfo.value.phone,
  value: PeopleInfo.value.value
});

const change_info = () => {
  formData.value = {
    name: PeopleInfo.value.name,
    phone: PeopleInfo.value.phone,
    value: PeopleInfo.value.value
  };
  showEditDialog.value = true;
};

const handleConfirm = () => {
  PeopleInfo.value = {
    ...PeopleInfo.value,
    ...formData.value
  };
  showEditDialog.value = false;
};
</script>

<template>
  <div class="index">
    <van-dialog 
      v-model:show="showEditDialog" 
      title="修改个人信息"
      show-cancel-button
      @confirm="handleConfirm"
    >
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="formData.name"
            label="姓名"
            placeholder="请输入姓名"
          />
          <van-field
            v-model="formData.phone"
            label="电话"
            placeholder="请输入电话"
          />
       
        </van-cell-group>
      </van-form>
    </van-dialog>
    <div class="top" v-if="refresh">
      <p class="title">个人中心</p>
      <div class="top-person">
        <div class="person">
          <div class="avatar">
            <van-image :url="PeopleInfo.headimg" style="width: 50px; height: 50px;"></van-image>
          </div>
          <div class="info">
            <p class="name" >姓名:{{ PeopleInfo.name }}</p>
            <p>
              <span>电话:</span><span>{{ PeopleInfo.phone }}</span>
            </p>
            <p>
              <span>金额:￥</span><span>{{ PeopleInfo.value }}</span>
            </p>
          </div>
          <van-button type="primary" style="width: 100px;;" @click="change_info">编辑</van-button>
        </div>
      </div>
    </div>

    <div class="cards">
      <div class="personinfo" v-for="item in lists" @click="router.push(item.router)">
        <img :src="item.img" style="width: 20px" />
        <p>{{ item.lable }}</p>
        <el-button link>
          <el-icon>
            <ArrowRightBold />
          </el-icon>
        </el-button>
      </div>
    </div>
    <div class="logout">
      <el-button type="primary" @click="logout">退出登录</el-button>
    </div>
  </div>
</template>

<style lang="scss" scope>
.index {
  .top {
    .person {
      width: 100%;
      margin: 0px 10px;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      align-items: center;
      color: #fff;
      column-gap: 10px;

      .avatar {
        img {
          width: 100%;
          height: 100%;
        }
        width: 60px;
        height: 60px;
        // border: 1px solid black;
      }

      .info {
        .name {
          font-weight: bold;
          color: #fff;
          font-size: 18px;
        }
        color: rgba($color: #fff, $alpha: 0.8);
        font-size: 12px;
        width: 65%;
        height: 88%;
      }
    }

    &-person {
      width: 90%;
    }

    .title {
      font-size: 1.4rem;
      line-height: 4;
      color: #fff;
      text-align: center;
    }

    background: #3b87f6;
    position: relative;
    display: table;
    padding-bottom: 20px;
    width: 100%;
    border-radius: 0 0 10px 10px;
  }

  .cards {
 
    .personinfo {
      p {
        font-size: 1rem;
      }
      padding: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 3px solid #f6f6f6;
    }

    background-color: #fff;
    border-radius: 8px;
    margin-top: 20px;
  }

  .logout {
    position: absolute;
    bottom: 1rem;
    width: 100%;
    .el-button {
      width: 90%;
    }
  }

  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}
</style>
